<template>
  <div class="receipt">
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="m-t-20">
            <view class="flex flex-c f-25"> 总收款 </view>
            <view class="flex flex-c f-20 m-b-20"> {{ amountPaid }} </view>
          </view>
        </template>
      </view>
    </hx-navbar>
    <c-time @success="getTime"></c-time>
    <view class="list-view m-t-150">
      <u-list @scrolltolower="scrolltolower">
        <u-list-item v-for="(item, index) in list" :key="index">
          <view class="flex list-item" @click="toList(item)">
            <view class="con-view p-10">
              <view class="flex-sb bot-view m-b-10">
                <view class="title-view f-32 flex">
                  <text>{{ item.comegoName }}</text>
                  <text> <u-tag class="m-l-10" :text="item.comegoTypeName ? item.comegoTypeName.slice(0, 1) : '-'"
                      size="mini" plain plainFill></u-tag></text>
                </view>
                <view class="">
                  <text class="gray m-r-10 f-13">{{ item.businessTime }}</text>
                  <text class="gray m-r-10 f-13">{{ item.comegoName }}</text>
                  <text class="blue m-r-10" v-if="item.isCancel">已作废</text>
                  <text class="red m-r-10" v-if="item.auditState == false && item.isCancel == false">未审核</text>
                  <text class="green m-r-10" v-if="item.auditState == true && item.isCancel == false">已审核</text>
                </view>
              </view>


              <view class="flex-sb bot-view m-t-30">
                <view class="">
                  <text class="gray m-r-10">收款</text>
                  <text>{{ item.amountPaid }}</text>
                </view>
                <view class="">
                  <text class="m-r-10 c-red">￥{{ item.amountPayable }}</text>
                </view>
              </view>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>
  </div>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import { date } from '@/utils/util.js'
import { getlist } from "@/apis/bill/payment-order";
import cTime from './components/time.vue'

export default {
  components: {
    clIcon,
    cTime
  },
  data() {
    return {
      time: '',
      config: {
        title: "付款单",
        color: "#ffffff",
        navigateBack: 1, // 返回的页面数  默认为1 返回上级  2返回上2级  3返回上3级
        // backTabPage:'', // 跳转到tab传这个参数
        // backPage:'', // 跳转到其他页面传这个参数
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
        ],
      },
      // 列表数据
      list: [],
      pages: {
        current: 1,
        size: 20,
      },
      beginTime: null,
      endTime: null,
      amountPaid: 0 // 总收款
    };
  },
  computed: {},
  onLoad(opt) {
    this.initData()
  },
  onShow() {
  },
  methods: {
    // 获取时间
    getTime(val) {
      this.pages.current = 1;
      this.list = []
      this.beginTime = val[0];
      this.endTime = val[1];
      this.initData()
    },
    scrolltolower() {

    },
    // 跳转到详情
    toList(item) {
      this.$Router.push({
        path: "/pages/application/pages/finance/accounts-receivable-payable/add-payment-order",
        query: {
          id: item.id
        }
      });
    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
      let _this = this;
      let billId = {
        data: {
          isCancel: true,
          beginTime: this.beginTime,
          endTime: this.endTime
        },
        page: {
          current: _this.pages.current,
          size: _this.pages.size,
          sort: "",
          order: "desc",
          total: 0,
          orders: [
            {
              column: "business_time",
              asc: false,
            },
          ],
        },
      };
      getlist(billId).then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.list = _this.pages.current == 1 ? data.page.records : [...data.page.records, ...this.list];
        this.amountPaid = data.footerTotal && data.footerTotal.amountPaid;
      });
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        this.$Router.push({
          path: "/pages/application/pages/finance/accounts-receivable-payable/add-payment-order",
        });
      } else if (item.key === "btn2") {
        // this.productPopShow = !this.productPopShow;
      }
    },
  },
  mounted() {

  }
};
</script>


<style lang="scss" scoped>
.top-view {
  flex: 1;
  background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
  color: #fff;
}

.list-item {
  margin: 0 40rpx 40rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 4rpx 6rpx 16rpx #c7c7c7;
  align-items: center;

  .img-view {
    width: 90rpx;
    height: 90rpx;
    overflow: hidden;
    border-radius: 100%;
    // background-color: #03A9F4;
    align-items: center;
    justify-content: center;
    color: #fafafa;
    margin-right: 24rpx;

    .store-name {
      width: 56rpx;
      height: 40rpx;
      overflow: hidden;
    }
  }

  .con-view {
    flex: 1;

    .title-view {
      color: #333;
      font-weight: bold;
    }

    .l-view {
      flex: 1;
    }

    .bot-view {
      flex-wrap: wrap;
    }

    .gray {
      color: #999;
    }
  }
}
</style>